<template>
  <div class="main">
    <input type="checkbox" id="chk" aria-hidden="true">

    <div class="login">
      <form class="form" @submit.prevent="doLogin">
        <label for="chk" aria-hidden="true">登录</label>
        <input class="input" type="text" name="username" placeholder="用户名" v-model="username" required>
        <input class="input" type="password" name="password" placeholder="密码" v-model="password" required>
        <button type="submit">提交</button>
      </form>
    </div>

    <div class="register">
      <form class="form" @submit.prevent="doRegister">
        <label for="chk" aria-hidden="true">注册</label>
        <input class="input" type="text" name="username" placeholder="用户名" v-model="register_username" required>
        <input class="input" type="password" name="password" placeholder="密码" v-model="register_password" required>
        <input class="input" type="text" name="email" placeholder="邮箱" v-model="register_email" required>
        <button>提交</button>
      </form>
    </div>
  </div>
</template>

<script setup>

import {ref} from "vue";
import router from "@/router/index.js";
import axios from "axios";
import {message} from "ant-design-vue";

/**
 向后端发起登录请求并处理后端响应
 */
let username = ref('')
let password = ref('')
let register_username = ref('')
let register_password = ref('')
let register_email = ref('')

//向后端发起登录请求--------------------------------------------------------------------------------------
function doLogin() {

  //构建formDate,浏览器原生提供的API函数fetch，以便于后端的Security框架能够正确处理登录请求
  let formData = new FormData();
  formData.append('username', username.value)
  formData.append('password', password.value)
  fetch('/api/doLogin', {
    method: 'POST',
    body: formData
  })
      .then(response => response.json())
      .then(data => {
        console.log(data);
        if (data.code === 200) {
          message.info("欢迎登录")
          router.push("/detection")
          localStorage.setItem("JWT", data.data)
          localStorage.setItem("username", username.value)
          console.log('/api/getUserId/'+username.value)
          axios.get('/api/getUserId/'+username.value)
              .then(response => {
                console.log(response)
                if(response.data.code === 200){
                  localStorage.setItem("userId",response.data.data)
                }
              })
              .catch(error => {
                console.log(error)
              })
        }
      })
      .catch(error => {
        console.log(error)
      })
}

//向后端发起注册请求--------------------------------------------------------------------------------------
function doRegister() {
  console.log("向后端发起注册请求")
  axios.post('/api/register', {
    username: register_username.value,
    password: register_password.value,
    email: register_email.value
  }, {
    headers: {
      'Content-Type': 'application/json' // 确保Content-Type正确设置
    }
  }).then(response => {
    console.log(response)
    if(response.data.code === 200){
      message.info(response.data.msg)
    }else {
      message.error(response.data.msg)
    }
  }).catch(error => {
    console.log(error)
  })

}


</script>

<style scoped lang="less">
.main {
  position: relative;
  display: flex;
  flex-direction: column;
  background-color: rgb(67, 115, 141);
  max-width: 450px;
  max-height: 550px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 7px 7px 10px 3px #24004628;
  margin: 5% auto 0;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 40px 24px 24px;
}

/*checkbox to switch from sign up to login*/
#chk {
  display: none;
}

/*Login*/
.login {
  position: relative;
  width: 100%;
  height: 100%;
}

.login label {
  margin: 25% 0 5%;
}

label {
  color: #fff;
  font-size: 2rem;
  justify-content: center;
  display: flex;
  font-weight: bold;
  cursor: pointer;
  transition: .5s ease-in-out;
}

.input {
  width: 100%;
  height: 40px;
  background: #b4b2b2;
  padding: 10px;
  border: none;
  outline: none;
  border-radius: 4px;
  font-size: 16px;
}

/*Register*/
.register {
  background: #eee;
  border-radius: 60% / 10%;
  transform: translateY(5%);
  transition: .8s ease-in-out;
}

.register label {
  color: rgb(67, 115, 141);
  transform: scale(.6);
}

#chk:checked ~ .register {
  transform: translateY(-60%);
}

#chk:checked ~ .register label {
  transform: scale(1);
  margin: 10% 0 5%;
}

#chk:checked ~ .login label {
  transform: scale(.6);
  margin: 5% 0 5%;
}

/*Button*/
.form button {
  width: 85%;
  height: 40px;
  margin: 12px auto 10%;
  color: #fff;
  background: #b2dad6;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: .2s ease-in;
}

.form button:hover {
  background-color: #3f94d0;
}
</style>
